<div class="row">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
        <div class="widget am-cf">
            <form id="my-form" class="am-form tpl-form-line-form" method="post">
                <div class="widget-body">
                    <fieldset>
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">新增人员</div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-2 am-form-label form-require">人员类型 </label>
                            <div class="am-u-sm-10 ">
                                <label class="am-radio-inline ch">
                                    <input type="radio" name="agent[type]"
                                           value="2" class="aaa">
                                    城市管理员
                                </label>
                                <label class="am-radio-inline ch">
                                    <input type="radio" name="agent[type]"
                                           value="3">
                                    区域管理员
                                </label>
                                <label class="am-radio-inline ch">
                                    <input type="radio" name="agent[type]"
                                           value="4">
                                    销售管理员
                                </label>
                                <label class="am-radio-inline ch">
                                    <input type="radio" name="agent[type]"
                                           value="5">
                                    置业顾问
                                </label>
                                <label class="am-radio-inline ch">
                                    <input type="radio" name="agent[type]"
                                           value="7">
                                    楼管管理人员
                                </label>
                                <label class="am-radio-inline ch">
                                    <input type="radio" name="agent[type]"
                                           value="6">
                                    楼管人员
                                </label>
                            </div>
                        </div>
                        <div class="am-form-group quyu">
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">选择区域 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <select name="agent[cityId2]" data-am-selected="{btnSize: 'sm'}">
                                    <?php if (isset($roleList)): foreach ($roleList as $role): ?>
                                        <option value="<?= $role['id'] ?>"> <?= $role['name'] ?></option>
                                    <?php endforeach; endif; ?>
                                </select>
                            </div>
                        </div>

                        <div class="am-form-group quyus" style='display:none'>
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">选择区域 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <div class="x-region-select" data-region-selected>
                                    <select name="agent[cityId1]" data-am-selected="{btnSize: 'sm'}" data-province2 required>
                                        <option value="0" selected> 请选择城市</option>
                                    </select>
                                    <select name="agent[areaId1]" data-am-selected="{btnSize: 'sm'}" data-city2 required>
                                        <option value="0" selected> 请选择区域</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="am-form-group quyuss" style='display:none'>
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">选择区域和楼盘 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <div class="x-region-select" data-region-selected>
                                    <select name="agent[cityId]" data-am-selected="{btnSize: 'sm'}"  data-province required>
                                        <option value="0" selected> 请选择城市</option>
                                    </select>
                                    <select name="agent[areaId]" data-am-selected="{btnSize: 'sm'}" data-city required>
                                        <option value="0" selected> 请选择区域</option>
                                    </select>
                                    <select name="agent[loupanids][]" class="ccc" multiple data-am-selected="{btnSize: 'sm',maxHeight: 250}" data-region required>
                                        <option value="0" selected> 请选择楼盘</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="am-form-group quyuss1" style='display:none'>
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">选择区域和楼盘 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <div class="x-region-select" data-region-selected>
                                    <select name="agent[cityId3]" data-am-selected="{btnSize: 'sm'}"  data-province1 required>
                                        <option value="0" selected> 请选择城市</option>
                                    </select>
                                    <select name="agent[areaId3]" data-am-selected="{btnSize: 'sm'}" data-city1 required>
                                        <option value="0" selected> 请选择区域</option>
                                    </select>
                                    <select name="agent[loupanids3]" class="ccc" data-am-selected="{btnSize: 'sm',maxHeight: 250}" data-region1 required>
                                        <option value="0" selected> 请选择楼盘</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="am-form-group" >
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">人员名称</label>
                            <div class="am-u-sm-9 am-u-end">
                                <input type="text" class="tpl-form-input" name="agent[name]" value=""
                                       placeholder="如：张三" required>
                            </div>
                        </div>
                        <div class="am-form-group am-padding-top-sm">
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">登录名称 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <input class="tpl-form-input" name="agent[user_name]" placeholder="如：13222222222" type="number" id="username"   style="ime-mode:disabled;"  onpaste="return false;" oninput="if(value.length>11)value=value.slice(0,11)"
                                       value="" required>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">账户密码 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <input type="password" class="tpl-form-input" name="agent[password]" value=""
                                       required>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require"> 确认密码 </label>
                            <div class="am-u-sm-9 am-u-end">
                                <input type="password" class="tpl-form-input" name="agent[password_confirm]" value=""
                                       required>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                <button type="submit" class="j-submit am-btn am-btn-secondary">提交
                                </button>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="assets/common/js/vue.min.js"></script>
<script src="assets/common/js/ddsort.js"></script>
<script src="assets/admin/plugins/umeditor/umeditor.config.js?v=<?= $version ?>"></script>
<script src="assets/admin/plugins/umeditor/umeditor.min.js"></script>
<script src="assets/store/js/goods.spec.js?v=<?= $version ?>"></script>
<script>
    function displayResult(){
        var name = $("#username").val();
        var nameValue = name.replace(/\D/g,'');
        $("#username").val(nameValue);
    }
    function ajaxx(datas,obj){
        var REGIONS =datas;
        var methods = {
            addItem: function ($ele, data) {
                $ele.html('');
                var selectedId = $ele.data('id')
                    , isSelected = false;
                $.each(data, function (i, item) {
                    if (isSelected === false) {
                        isSelected === false && (isSelected = selectedId > 0 && selectedId === item.id);
                    }
                    var optionStr = '<option value="' + item.id + '">' + item.name + '</option>';
                    $ele.append(optionStr);
                });
                isSelected && $ele.val(selectedId);
                $ele.change();
            },
            clearItem: function ($ele) {
                $ele.find('option').remove();
            }
        };

        // 注册省市区三级联动选择事件
        $('[data-region-selected]').each(function () {
            var $dom = $(this);
            if(obj==4){
                var $province = $dom.find('[data-province]')
                    , $city = $dom.find('[data-city]')
                    , $region = $dom.find('[data-region]');
            }else if(obj==5){
                var $province = $dom.find('[data-province1]')
                    , $city = $dom.find('[data-city1]')
                    , $region = $dom.find('[data-region1]');
            }else{
                var $province = $dom.find('[data-province2]')
                    , $city = $dom.find('[data-city2]')
                    , $region = $dom.find('[data-region2]');
            }

            console.log($province)
            // 选择省联动城市列表
            $province.on("change", function () {
                var provinceId = $(this).val();
                if (provinceId > 0) {
                    methods.clearItem($city);
                    methods.clearItem($region);
                    $city.data('provinceId', provinceId);
                    // 遍历城市列表
                    methods.addItem($city, REGIONS[provinceId].city);
                }
            });
            // 选择市联动地区列表
            $city.on("change", function () {
                var $this = $(this)
                    , provinceId = $this.data('provinceId')
                    , cityId = $this.val();
                if (cityId > 0) {
                    methods.clearItem($region);
                    $region.data('cityId', cityId);
                    // 遍历地区列表
                    methods.addItem($region, REGIONS[provinceId].city[cityId].region);
                }
            });
            // 遍历省份列表
            methods.addItem($province, REGIONS);
        });
    }
    $(function () {
        //1：主管理员 2：城市管理员 3：区域管理员 4:销售管理员  5：置业顾问 6：楼管人员
        $('.aaa').attr('checked','checked');
        $('.ch').change(function(){
            var cs=$('input[name="agent[type]"]:checked').val();
            if(cs==2){
                $('.quyu').show();
                $('.quyus').hide();
                $('.quyuss').hide();
                $('.quyuss1').hide();
            }else if(cs==3){
                $('.quyus').show();
                $('.quyu').hide();
                $('.quyuss').hide();
                $('.quyuss1').hide();
                $.ajax({
                    type: "post",
                    url: "<?php echo url('agent.agent/x'); ?>",
                    data: {},
                    dataType: "json",
                    success: function(data){
                        ajaxx(data.data,3)
                    }
                });
            }else if(cs==4){
                //销售管理员
                $('.quyuss').show();
                $('.quyu').hide();
                $('.quyus').hide();
                $('.quyuss1').hide();
                $.ajax({
                    type: "post",
                    url: "<?php echo url('agent.agent/x'); ?>",
                    data: {},
                    dataType: "json",
                    success: function(data){
                        ajaxx(data.data,4)
                    }
                });
            }else if(cs==5){
                $('.quyuss1').show();
                $('.quyuss').hide();
                $('.quyu').hide();
                $('.quyus').hide();
                $.ajax({
                    type: "post",
                    url: "<?php echo url('agent.agent/y'); ?>",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        ajaxx(data.data,5)
                    }
                });
            }else if(cs==6){
                $('.quyus').show();
                $('.quyu').hide();
                $('.quyuss').hide();
                $('.quyuss1').hide();
                $.ajax({
                    type: "post",
                    url: "<?php echo url('agent.agent/z'); ?>",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        ajaxx(data.data,6)
                    }
                });
            }else{
                $('.quyus').show();
                $('.quyu').hide();
                $('.quyuss').hide();
                $('.quyuss1').hide();
                $.ajax({
                    type: "post",
                    url: "<?php echo url('agent.agent/z'); ?>",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        ajaxx(data.data,6)
                    }
                });
            }
        })
        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm();

    });
</script>
